<!DOCTYPE html>
<html>
<head>
<title>${(currentCtg.name)!"Category"}</title>
<!--js and css-->
<#include "importJsAndCss.html">
</head>

<body class="lightbox-processed">
	<script type="text/javascript">
        var ffid=33333;
        $(document).ready(function() {
            $(".quote_outer input[type=file]").change(function(event) {
                event.preventDefault();
                $(this).after('<div id="'+ffid+'"><img src="images/images.jpg" alt=""/>&nbsp; Image Selected.</div>');});
        });

        $(function() {
            $( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
            $( "#datepicker" ).datepicker();
            $( "#Deadline" ).datepicker();
        });
    </script>

	<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
	<script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
            $('#slider2').nivoSlider();

            $('#carousel').carouFredSel({
                circular: true,         // Determines whether the carousel should be circular.
                infinite: true,         // Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
                responsive: true,      // Determines whether the carousel should be responsive. If true, the items will be resized to fill the carousel.
                direction: "left",      // The direction to scroll the carousel. Possible values: "right", "left", "up" or "down".
                width: null,            // The width of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable widths), "auto" (measure the widest item) or a percentage like "100%" (only applies on horizontal carousels)
                height: null,           // The height of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable heights), "auto" (measure the tallest item) or a percentage like "100%" (only applies on vertical carousels)
                align: "center",
                scroll : {
                    items           : 1
                },
                wraper : {
                    element     : "div",
                    classname   : "col-sm-8"
                }
            });
        });


    </script>

	<div id="wrapper">
		<!--引入头部-->
		<#include "header.html">

		<!-- 引入导航 -->
		<#include "navigation.html">

		<div style="clear: both;"></div>

		<!--页面里中间内容 -->



		<div class="top_container">
			<div id="wrapper">

				<div class="theme-default">
					<div class="container relative">

						<div id="hidden-form">

							<div id="slider-form">

								<div class="blueform">

									<div class="col-sm-12">
										<img src="images/get-free-quote.png"
											class="red-ribbon" />
									</div>
									<form role="form" method="POST" id="contact-form"
										class="new-improved-form" enctype="multipart/form-data">

										<div class="col-sm-12">
											<div class="form-group">
												<label for="edit-title-1">Name: *</label><input type="text"
													id="Name" name="form[Name]" placeholder="Name"
													class="form-text form-control" />
											</div>
										</div>
										<div class="col-sm-6">
											<div class="form-group">
												<label for="edit-title-1">Phone:</label><input type="text"
													id="Phone" name="form[Phone]" placeholder="Phone"
													class="form-text form-control" />
											</div>
										</div>
										<div class="col-sm-6">
											<div class="form-group">
												<label for="edit-title-1">Email: *</label><input type="text"
													id="Email" name="form[Email]" placeholder="Email"
													class="form-text form-control" />
											</div>
										</div>
										<div class="col-sm-6">
											<div class="form-group">
												<label for="Size">Size:</label><select id="Size"
													name="variations[Size]]" class="form-text form-control"><option
														value="1">2 inches</option>
													<option value="2">2.5 inches</option>
													<option value="3">3 inches</option>
													<option value="4">3.5 inches</option>
													<option value="5">4 inches</option>
													<option value="6">4.5 inches</option>
													<option value="7">5 inches</option>
													<option value="8">5.5 inches</option>
													<option value="9">6 inches</option>
													<option value="10">6.5 inches</option>
													<option value="11">7 inches</option>
													<option value="12">7.5 inches</option>
													<option value="13">8 inches</option>
													<option value="14">8.5 inches</option>
													<option value="15">9 inches</option>
													<option value="16">9.5 inches</option>
													<option value="17">10 inches</option>
													<option value="18">10.5 inches</option>
													<option value="19">11 inches</option>
													<option value="20">11.5 inches</option>
													<option value="21">12 inches</option></select>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="form-group">
												<label for="PercentageofEmbroidery">% Embroidery:</label><select
													id="PercentageofEmbroidery"
													name="variations[PercentageofEmbroidery]]"
													class="form-text form-control"><option value="27">50%</option>
													<option value="28">75%</option>
													<option value="29">100%</option></select>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="form-group">
												<label for="Quantity">Quantity:</label><select id="Quantity"
													name="variations[Quantity]]" class="form-text form-control"><option
														value="30">10</option>
													<option value="31">20</option>
													<option value="32">50</option>
													<option value="33">100</option>
													<option value="34">200</option>
													<option value="35">300</option>
													<option value="36">500</option>
													<option value="37">1000</option>
													<option value="38">2000</option>
													<option value="39">3000</option>
													<option value="40">4000</option>
													<option value="41">5000</option>
													<option value="42">7500</option>
													<option value="43">10000</option></select>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="form-group">
												<label for="edit-title-1">Date needed: </label><input
													type="text" id="Deadline" name="form[Deadline]"
													placeholder="Deadline" class="form-text form-control" />
											</div>
										</div>
										<div class="col-sm-6">
											<div class="form-group">
												<div id="edit-field-fq-image-0-1-ahah-wrapper">
													<div class="form-item"
														id="edit-field-fq-image-0-1-upload-wrapper">
														<label for="File">Image Upload:</label>
														<div class="filefield-upload clear-block">
															<input style="width: 68%" type="file"
																class="form-file wmds-form-file" id="File" name="File" />
														</div>
													</div>
												</div>
											</div>
										</div>
										<input type="hidden" value="1" name="Product" />
										<div class="col-sm-6">
											<div class="form-group">
												<label for="edit-title-1">AlternativeEmail</label><input
													type="text" id="AlternativeEmail"
													name="form[AlternativeEmail]"
													placeholder="AlternativeEmail"
													class="form-text form-control" />
											</div>
										</div>
										<div class="col-sm-6">
											<div class="form-group">
												<label for="Notes">Notes: </label>
												<textarea cols="60" rows="1" id="Notes" name="form[Notes]"
													placeholder="Notes"
													class="form-textarea  resizable form-control"></textarea>
											</div>
										</div>
										<script type="text/javascript">

                                        $('#AlternativeEmail').parent().parent().addClass('TopTd');

                                    </script>

										<div class="clearfix"></div>

										<div class="col-md-12">

											<div class="clearfix"></div>

											<div class="center-submit">

												<input name="button"
													class="btn btn-warning submit-blue-form btn-lg btn-block"
													id="button" value="Give me your best price"
													onclick="return check_valid1();" type="submit">

											</div>

										</div>

									</form>

								</div>

							</div>

						</div>



						<div class="heropatches-about">

							<div class="about-text-title">
								<h1>${(currentCtg.name)!}</h1>
							</div>

							<div class="about-text">
								<p>
									${(currentCtg.description)!}
								</p>
							</div>

						</div>
						<div class="col-md-12 famous-patch-block">
							<div id="products">
								<#list rs.rows as row>
								<div class="gallery_patches" style="width: 160px; height: 162px; background-color: #FFF; border: 3px solid #F7F7F7; display: inline-block; text-align: center; margin: 5px">

									<div style="padding-bottom: 8px; clear: both; height: 150px; overflow: hidden;">

										<a href="${(row.bigImg)!}"
											rel="prettyPhoto[gallery]" title="${(row.name)!}">

											<img alt="${(row.name)!}" src="${(row.images)!}">

										</a>

									</div>

								</div>
								</#list>
								<div class="clear"></div>

							</div>

						</div>

						<!-- paginare -->


						<div class="item-list">

								<ul class="pager">
									<#if rs.previous>
										<li class="pager-next"><a class="active"
										title="上一页"
										href="goods.do?loadGoodsByCtgId&rows=6&ctgId=${(currentCtg.id)!}&page=${rs.page-1}">‹上一页 </a></li>
									</#if>
									<#if rs.next>
									<li class="pager-next"><a class="active"
										title="下一页"
										href="goods.do?loadGoodsByCtgId&rows=6&ctgId=${(currentCtg.id)!}&page=${rs.page+1}">下一页 ›</a></li>
									</#if>
								</ul>

						</div>
						<div class="clearfloat"></div>

					</div>

					<div class="spacer">&nbsp;</div>
				</div>
			</div>

		</div>

	<!--页面里中间内容结束 -->

	<!--引入底部-->
	<#include "footer.html">
	</div>


	<script type="text/javascript" src="js/conversion.js"></script>
	<noscript>
		<div style="display: inline;"></div>
	</noscript>

	<script src="js/jquery.prettyPhoto.js"></script>
</body>
</html>

